<template>
  <div class="home">
		<div class="news-detail title" v-if="''+id">文章{{id}}：{{articleDetails[+id].title}}</div>
		<img  v-if="''+id" :src="articleDetails[+id] && articleDetails[+id].image">
		<p  v-if="''+id" >{{articleDetails[+id].paragraph}}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import articleDetails from "../../mock.js";
export default {
  name: 'Home',
	components: {},
	data () {
		return {
			id: '',
			articleDetails: []
		}
	},
	created () {
		console.log('created')
		console.log('articleDetails', articleDetails.array)
		this.id = this.$route.query.id || ''
		this.articleDetails = articleDetails.array;
	},
	watch: {
    $route (val) {
			console.log(val)
			this.id = val.query.id
    }
  }
}
</script>
<style>
.home{
	font-size: 14px;
}
.home .title{
	font-size: 32px;
	text-align: center;
	padding: 10px;
	font-weight: bold;
	color:#333;
}
</style>
